<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>宠物用品商城</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
        }
        
        body {
            background-color: #f5f5f5;
            color: #333;
            max-width: 480px;
            margin: 0 auto;
            height: 100vh;
            overflow-x: hidden;
            position: relative;
            padding-bottom: 60px; /* 为底部导航栏预留空间 */
        }
        
        .page {
            display: none;
            height: 100%;
            overflow-y: auto;
            background-color: white;
        }
        
        .page.active {
            display: block;
        }
        
        header {
            background-color: #4CAF50;
            color: white;
            padding: 16px;
            text-align: center;
            font-size: 18px;
            font-weight: bold;
            position: relative;
        }
        
        /* 首页头部样式 - 包含搜索框 */
        .home-header {
            padding: 10px 16px;
            display: flex;
            align-items: center;
        }
        
        .search-container {
            flex: 1;
            position: relative;
        }
        
        .home-search {
            width: 100%;
            padding: 10px 16px;
            border-radius: 20px;
            border: none;
            font-size: 14px;
            background-color: rgba(255, 255, 255, 0.9);
        }
        
        .search-icon {
            position: absolute;
            right: 12px;
            top: 50%;
            transform: translateY(-50%);
            color: #999;
            cursor: pointer;
        }
        
        .back-btn {
            position: absolute;
            left: 16px;
            top: 50%;
            transform: translateY(-50%);
            cursor: pointer;
            font-size: 20px;
        }
        
        .container {
            padding: 16px;
        }
        
        .form-group {
            margin-bottom: 16px;
        }
        
        label {
            display: block;
            margin-bottom: 8px;
            font-size: 14px;
            color: #666;
        }
        
        input, select, textarea {
            width: 100%;
            padding: 12px;
            border: 1px solid #ddd;
            border-radius: 8px;
            font-size: 16px;
        }
        
        button {
            width: 100%;
            padding: 14px;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            margin-top: 8px;
        }
        
        button:hover {
            background-color: #45a049;
        }
        
        .link-text {
            color: #4CAF50;
            text-align: center;
            margin-top: 16px;
            cursor: pointer;
            font-size: 14px;
        }
        
        .error-message {
            color: #f44336;
            font-size: 14px;
            margin-top: 4px;
            display: none;
        }
        
        /* 底部导航栏 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            max-width: 480px;
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
            background-color: white;
            border-top: 1px solid #eee;
            padding: 8px 0;
            z-index: 100;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #999;
            font-size: 12px;
            cursor: pointer;
            width: 50%; /* 两个导航项各占50%宽度 */
        }
        
        .nav-item.active {
            color: #4CAF50;
        }
        
        .nav-icon {
            font-size: 20px;
            margin-bottom: 4px;
        }
        
        /* 商品列表样式 */
        .category-filter {
            margin-bottom: 16px;
        }
        
        .category-buttons {
            display: flex;
            gap: 8px;
            overflow-x: auto;
            padding-bottom: 8px;
        }
        
        .category-btn {
            padding: 8px 16px;
            background-color: #eee;
            border: none;
            border-radius: 16px;
            white-space: nowrap;
            font-size: 14px;
        }
        
        .category-btn.active {
            background-color: #4CAF50;
            color: white;
        }
        
        .product-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 16px;
        }
        
        .product-item {
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
            cursor: pointer;
        }
        
        .product-img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            background-color: #f5f5f5;
        }
        
        .product-info {
            padding: 8px;
        }
        
        .product-name {
            font-size: 14px;
            margin-bottom: 4px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        
        .product-price {
            color: #f44336;
            font-weight: bold;
            font-size: 16px;
        }
        
        /* 商品详情样式 */
        .detail-img {
            width: 100%;
            height: 240px;
            object-fit: cover;
            background-color: #f5f5f5;
        }
        
        .detail-title {
            font-size: 18px;
            margin: 16px 0 8px;
        }
        
        .detail-price {
            color: #f44336;
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 16px;
        }
        
        .detail-desc {
            margin-bottom: 16px;
            line-height: 1.6;
        }
        
        .quantity-control {
            display: flex;
            align-items: center;
            width: 120px;
            margin: 16px 0;
        }
        
        .quantity-btn {
            width: 36px;
            height: 36px;
            background-color: #eee;
            border: none;
            border-radius: 50%;
            font-size: 18px;
            padding: 0;
            margin: 0;
        }
        
        .quantity-input {
            width: 48px;
            height: 36px;
            text-align: center;
            margin: 0 8px;
            border: 1px solid #ddd;
        }
        
        .action-buttons {
            display: flex;
            gap: 16px;
            margin-top: 24px;
        }
        
        .action-buttons button {
            flex: 1;
        }
        
        /* 购物车样式 */
        .cart-item {
            display: flex;
            padding: 16px 0;
            border-bottom: 1px solid #eee;
        }
        
        .cart-item-img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 8px;
            margin-right: 16px;
            background-color: #f5f5f5;
        }
        
        .cart-item-info {
            flex: 1;
        }
        
        .cart-item-name {
            font-size: 14px;
            margin-bottom: 8px;
        }
        
        .cart-item-price {
            color: #f44336;
            font-weight: bold;
        }
        
        .cart-item-quantity {
            display: flex;
            align-items: center;
            margin-top: 8px;
        }
        
        .cart-total {
            padding: 16px;
            border-top: 1px solid #eee;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .total-price {
            color: #f44336;
            font-size: 18px;
            font-weight: bold;
        }
        
        .cart-empty {
            text-align: center;
            padding: 48px 0;
            color: #999;
        }
        
        /* 订单确认样式 */
        .order-product {
            display: flex;
            padding: 16px;
            background-color: #f9f9f9;
            border-radius: 8px;
            margin-bottom: 16px;
        }
        
        .order-product-img {
            width: 60px;
            height: 60px;
            object-fit: cover;
            border-radius: 4px;
            margin-right: 12px;
            background-color: #f5f5f5;
        }
        
        .order-product-info {
            flex: 1;
        }
        
        .address-card {
            padding: 16px;
            border: 1px solid #eee;
            border-radius: 8px;
            margin-bottom: 16px;
            cursor: pointer;
        }
        
        .address-title {
            font-weight: bold;
            margin-bottom: 8px;
        }
        
        .payment-methods {
            margin: 16px 0;
        }
        
        .payment-method {
            display: flex;
            align-items: center;
            padding: 12px 0;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }
        
        .payment-method.selected {
            color: #4CAF50;
        }
        
        .payment-method input {
            width: auto;
            margin-right: 12px;
        }
        
        .order-summary {
            margin: 16px 0;
        }
        
        .summary-item {
            display: flex;
            justify-content: space-between;
            padding: 8px 0;
        }
        
        /* 订单列表样式 */
        .order-tabs {
            display: flex;
            border-bottom: 1px solid #eee;
            overflow-x: auto;
        }
        
        .order-tab {
            padding: 12px 16px;
            font-size: 14px;
            white-space: nowrap;
            cursor: pointer;
        }
        
        .order-tab.active {
            color: #4CAF50;
            border-bottom: 2px solid #4CAF50;
        }
        
        .order-card {
            background-color: white;
            border-radius: 8px;
            padding: 16px;
            margin-bottom: 16px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .order-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 12px;
        }
        
        .order-status {
            color: #f44336;
            font-weight: bold;
        }
        
        .order-items {
            margin: 12px 0;
        }
        
        .order-actions {
            display: flex;
            justify-content: flex-end;
            gap: 8px;
            margin-top: 12px;
        }
        
        .order-action-btn {
            padding: 8px 16px;
            font-size: 14px;
            width: auto;
        }
        
        .cancel-btn {
            background-color: #f5f5f5;
            color: #333;
        }
        
        /* 个人中心样式 */
        .profile-header {
            background-color: #4CAF50;
            color: white;
            padding: 32px 16px;
            text-align: center;
        }
        
        .avatar {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            background-color: white;
            margin: 0 auto 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 32px;
            color: #4CAF50;
            overflow: hidden;
        }
        
        .avatar img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .nickname {
            font-size: 18px;
            font-weight: bold;
        }
        
        .profile-menu {
            margin-top: 16px;
        }
        
        .menu-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 16px;
            background-color: white;
            border-bottom: 1px solid #eee;
            cursor: pointer;
        }
        
        .menu-item:last-child {
            border-bottom: none;
        }
        
        .menu-icon {
            margin-right: 16px;
            color: #4CAF50;
        }
        
        .menu-text {
            flex: 1;
        }
        
        .arrow-right {
            color: #ccc;
        }
        
        /* 成功提示 */
        .success-modal {
            position: fixed;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: rgba(0,0,0,0.7);
            color: white;
            padding: 24px;
            border-radius: 8px;
            display: none;
            z-index: 1000;
        }
        
        .success-modal.active {
            display: block;
        }
        
        /* 隐藏不需要底部导航的页面 */
        #registerPage .bottom-nav,
        #loginPage .bottom-nav {
            display: none;
        }
    </style>
</head>
<body>
    <!-- 注册界面 -->
    <div id="registerPage" class="page">
        <header>注册</header>
        <div class="container">
            <div class="form-group">
                <label for="registerRole">账号类型</label>
                <select id="registerRole">
                    <option value="user">普通用户</option>
                    <option value="merchant">商家</option>
                </select>
            </div>
            <div class="form-group">
                <label for="registerUsername">账号</label>
                <input type="text" id="registerUsername" placeholder="请输入账号">
                <div class="error-message" id="usernameError">账号不能为空</div>
            </div>
            <div class="form-group">
                <label for="registerPassword">密码</label>
                <input type="password" id="registerPassword" placeholder="请输入密码">
                <div class="error-message" id="passwordError">密码不能为空</div>
            </div>
            <button id="registerBtn">注册</button>
            <div class="link-text" id="toLogin">已有账号？去登录</div>
        </div>
        <!-- 底部导航栏 -->
        <div class="bottom-nav"></div>
    </div>

    <!-- 登录界面 -->
    <div id="loginPage" class="page active">
        <header>登录</header>
        <div class="container">
            <div class="form-group">
                <label for="loginUsername">账号</label>
                <input type="text" id="loginUsername" placeholder="请输入账号">
                <div class="error-message" id="loginUserError">账号不能为空</div>
            </div>
            <div class="form-group">
                <label for="loginPassword">密码</label>
                <input type="password" id="loginPassword" placeholder="请输入密码">
                <div class="error-message" id="loginPwdError">密码不能为空</div>
            </div>
            <button id="loginBtn">登录</button>
            <div class="link-text" id="toRegister">没有账号？去注册</div>
        </div>
        <!-- 底部导航栏 -->
        <div class="bottom-nav"></div>
    </div>

    <!-- 商品列表界面 -->
    <div id="productListPage" class="page">
        <!-- 首页头部 - 包含搜索框，无标题文字 -->
        <header class="home-header">
            <div class="search-container">
                <input type="text" id="productSearch" class="home-search" placeholder="搜索商品...">
                <span class="search-icon" id="searchBtn">🔍</span>
            </div>
        </header>
        <div class="container">
            <div class="category-filter">
                <div class="category-buttons">
                    <button class="category-btn active">全部</button>
                    <button class="category-btn">食品</button>
                    <button class="category-btn">玩具</button>
                    <button class="category-btn">服饰</button>
                    <button class="category-btn">日用品</button>
                    <button class="category-btn">医疗保健</button>
                </div>
            </div>
            <div class="product-list">
                <div class="product-item" onclick="goToPage('productDetailPage')">
                    <img src="https://picsum.photos/seed/petfood/200/200" class="product-img" alt="优质宠物粮食">
                    <div class="product-info">
                        <div class="product-name">优质宠物粮食</div>
                        <div class="product-price">¥89.00</div>
                    </div>
                </div>
                <div class="product-item" onclick="goToPage('productDetailPage')">
                    <img src="https://picsum.photos/seed/pettoy/200/200" class="product-img" alt="宠物益智玩具">
                    <div class="product-info">
                        <div class="product-name">宠物益智玩具</div>
                        <div class="product-price">¥39.00</div>
                    </div>
                </div>
                <div class="product-item" onclick="goToPage('productDetailPage')">
                    <img src="https://picsum.photos/seed/petcloth/200/200" class="product-img" alt="宠物秋冬装">
                    <div class="product-info">
                        <div class="product-name">宠物秋冬装</div>
                        <div class="product-price">¥59.00</div>
                    </div>
                </div>
                <div class="product-item" onclick="goToPage('productDetailPage')">
                    <img src="https://picsum.photos/seed/petbed/200/200" class="product-img" alt="舒适宠物窝">
                    <div class="product-info">
                        <div class="product-name">舒适宠物窝</div>
                        <div class="product-price">¥129.00</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- 底部导航栏 - 仅保留首页和我的 -->
        <div class="bottom-nav">
            <div class="nav-item active" onclick="goToPage('productListPage')">
                <div class="nav-icon">🏠</div>
                <div class="nav-text">首页</div>
            </div>
            <div class="nav-item" onclick="goToPage('profilePage')">
                <div class="nav-icon">👤</div>
                <div class="nav-text">我的</div>
            </div>
        </div>
    </div>

    <!-- 商品详情界面 -->
    <div id="productDetailPage" class="page">
        <header>
            <span class="back-btn" onclick="goToPage('productListPage')">◀</span>
            商品详情
        </header>
        <img src="https://picsum.photos/seed/petfood/400/300" class="detail-img" alt="优质宠物粮食">
        <div class="container">
            <div class="detail-title">优质宠物粮食 天然无谷配方 适合全年龄段</div>
            <div class="detail-price">¥89.00</div>
            <div class="detail-desc">
                <p>本品采用天然食材制作，无谷配方，富含蛋白质和多种维生素，有助于宠物健康成长。</p>
                <p>适用对象：犬类全年龄段</p>
                <p>净含量：2kg</p>
            </div>
            <div class="quantity-control">
                <button class="quantity-btn" id="minusBtn">-</button>
                <input type="number" id="quantityInput" value="1" min="1" class="quantity-input">
                <button class="quantity-btn" id="plusBtn">+</button>
            </div>
            <div class="action-buttons">
                <button id="addToCartBtn">加入购物车</button>
                <button id="buyNowBtn">立即购买</button>
            </div>
        </div>
        <!-- 底部导航栏 - 仅保留首页和我的 -->
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('productListPage')">
                <div class="nav-icon">🏠</div>
                <div class="nav-text">首页</div>
            </div>
            <div class="nav-item" onclick="goToPage('profilePage')">
                <div class="nav-icon">👤</div>
                <div class="nav-text">我的</div>
            </div>
        </div>
    </div>

    <!-- 购物车界面 -->
    <div id="cartPage" class="page">
        <header>
            <span class="back-btn" onclick="goToPage('productListPage')">◀</span>
            购物车
        </header>
        <div class="container">
            <div class="cart-items">
                <div class="cart-item">
                    <img src="https://picsum.photos/seed/petfood/100/100" class="cart-item-img" alt="优质宠物粮食">
                    <div class="cart-item-info">
                        <div class="cart-item-name">优质宠物粮食</div>
                        <div class="cart-item-price">¥89.00</div>
                        <div class="cart-item-quantity">
                            <button class="quantity-btn" onclick="updateQuantity(this, -1)">-</button>
                            <input type="number" value="1" min="1" class="quantity-input" onchange="checkQuantity(this)">
                            <button class="quantity-btn" onclick="updateQuantity(this, 1)">+</button>
                        </div>
                    </div>
                </div>
                <div class="cart-item">
                    <img src="https://picsum.photos/seed/pettoy/100/100" class="cart-item-img" alt="宠物益智玩具">
                    <div class="cart-item-info">
                        <div class="cart-item-name">宠物益智玩具</div>
                        <div class="cart-item-price">¥39.00</div>
                        <div class="cart-item-quantity">
                            <button class="quantity-btn" onclick="updateQuantity(this, -1)">-</button>
                            <input type="number" value="2" min="1" class="quantity-input" onchange="checkQuantity(this)">
                            <button class="quantity-btn" onclick="updateQuantity(this, 1)">+</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="cart-total">
                <div>总计：</div>
                <div class="total-price">¥167.00</div>
            </div>
            <button id="checkoutBtn">结算</button>
        </div>
        <!-- 底部导航栏 - 仅保留首页和我的 -->
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('productListPage')">
                <div class="nav-icon">🏠</div>
                <div class="nav-text">首页</div>
            </div>
            <div class="nav-item" onclick="goToPage('profilePage')">
                <div class="nav-icon">👤</div>
                <div class="nav-text">我的</div>
            </div>
        </div>
    </div>

    <!-- 订单确认界面 -->
    <div id="orderConfirmPage" class="page">
        <header>
            <span class="back-btn" onclick="goToPage('cartPage')">◀</span>
            确认订单
        </header>
        <div class="container">
            <div class="address-card" onclick="alert('选择地址')">
                <div class="address-title">收货地址</div>
                <div>张三 13800138000</div>
                <div>北京市朝阳区某某街道某某小区1号楼1单元101</div>
            </div>
            
            <div class="order-products">
                <div class="order-product">
                    <img src="https://picsum.photos/seed/petfood/100/100" class="order-product-img" alt="优质宠物粮食">
                    <div class="order-product-info">
                        <div class="product-name">优质宠物粮食</div>
                        <div>数量：1</div>
                        <div class="product-price">¥89.00</div>
                    </div>
                </div>
                <div class="order-product">
                    <img src="https://picsum.photos/seed/pettoy/100/100" class="order-product-img" alt="宠物益智玩具">
                    <div class="order-product-info">
                        <div class="product-name">宠物益智玩具</div>
                        <div>数量：2</div>
                        <div class="product-price">¥39.00</div>
                    </div>
                </div>
            </div>
            
            <div class="payment-methods">
                <div class="payment-method selected">
                    <input type="radio" name="payment" checked>
                    <div>微信支付</div>
                </div>
                <div class="payment-method">
                    <input type="radio" name="payment">
                    <div>支付宝</div>
                </div>
                <div class="payment-method">
                    <input type="radio" name="payment">
                    <div>银行卡支付</div>
                </div>
            </div>
            
            <div class="order-summary">
                <div class="summary-item">
                    <div>商品总价</div>
                    <div>¥167.00</div>
                </div>
                <div class="summary-item">
                    <div>运费</div>
                    <div>¥0.00</div>
                </div>
                <div class="summary-item">
                    <div>优惠</div>
                    <div>-¥0.00</div>
                </div>
                <div class="summary-item">
                    <div>订单总价</div>
                    <div class="total-price">¥167.00</div>
                </div>
            </div>
            
            <button id="submitOrderBtn">提交订单</button>
        </div>
        <!-- 底部导航栏 - 仅保留首页和我的 -->
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('productListPage')">
                <div class="nav-icon">🏠</div>
                <div class="nav-text">首页</div>
            </div>
            <div class="nav-item" onclick="goToPage('profilePage')">
                <div class="nav-icon">👤</div>
                <div class="nav-text">我的</div>
            </div>
        </div>
    </div>

    <!-- 用户端订单列表界面 -->
    <div id="userOrderListPage" class="page">
        <header>
            <span class="back-btn" onclick="goToPage('profilePage')">◀</span>
            我的订单
        </header>
        <div class="order-tabs">
            <div class="order-tab active">全部</div>
            <div class="order-tab">待付款</div>
            <div class="order-tab">待发货</div>
            <div class="order-tab">待收货</div>
            <div class="order-tab">已完成</div>
        </div>
        <div class="container">
            <div class="order-card">
                <div class="order-header">
                    <div>订单编号：20230512001</div>
                    <div class="order-status">待发货</div>
                </div>
                <div class="order-items">
                    <div class="order-product" style="padding: 0;">
                        <img src="https://picsum.photos/seed/petfood/80/80" class="order-product-img" alt="优质宠物粮食">
                        <div class="order-product-info">
                            <div class="product-name">优质宠物粮食</div>
                            <div>数量：1</div>
                        </div>
                    </div>
                </div>
                <div class="summary-item">
                    <div>合计：¥89.00</div>
                    <div>2023-05-12 10:30</div>
                </div>
                <div class="order-actions">
                    <button class="order-action-btn cancel-btn">取消订单</button>
                </div>
            </div>
            
            <div class="order-card">
                <div class="order-header">
                    <div>订单编号：20230510002</div>
                    <div class="order-status" style="color: #4CAF50;">已完成</div>
                </div>
                <div class="order-items">
                    <div class="order-product" style="padding: 0;">
                        <img src="https://picsum.photos/seed/pettoy/80/80" class="order-product-img" alt="宠物益智玩具">
                        <div class="order-product-info">
                            <div class="product-name">宠物益智玩具</div>
                            <div>数量：2</div>
                        </div>
                    </div>
                </div>
                <div class="summary-item">
                    <div>合计：¥78.00</div>
                    <div>2023-05-10 15:45</div>
                </div>
                <div class="order-actions">
                    <!-- 已移除查看详情按钮 -->
                </div>
            </div>
        </div>
        <!-- 底部导航栏 - 仅保留首页和我的 -->
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('productListPage')">
                <div class="nav-icon">🏠</div>
                <div class="nav-text">首页</div>
            </div>
            <div class="nav-item active" onclick="goToPage('profilePage')">
                <div class="nav-icon">👤</div>
                <div class="nav-text">我的</div>
            </div>
        </div>
    </div>

    <!-- 个人中心界面 - 移除地址管理 -->
    <div id="profilePage" class="page">
        <div class="profile-header">
            <div class="avatar" onclick="alert('修改头像')">
                <img src="https://picsum.photos/seed/avatar/80/80" alt="用户头像">
            </div>
            <div class="nickname" onclick="alert('修改昵称')">用户名</div>
        </div>
        <div class="profile-menu">
            <div class="menu-item" onclick="goToPage('userOrderListPage')">
                <div class="menu-icon">📦</div>
                <div class="menu-text">我的订单</div>
                <div class="arrow-right">→</div>
            </div>
            <div class="menu-item" onclick="goToPage('cartPage')">
                <div class="menu-icon">🛒</div>
                <div class="menu-text">购物车</div>
                <div class="arrow-right">→</div>
            </div>
            <div class="menu-item" onclick="alert('修改密码')">
                <div class="menu-icon">🔒</div>
                <div class="menu-text">修改密码</div>
                <div class="arrow-right">→</div>
            </div>
            <div class="menu-item" id="logoutBtn">
                <div class="menu-icon">🚪</div>
                <div class="menu-text">退出登录</div>
                <div class="arrow-right">→</div>
            </div>
        </div>
        <!-- 底部导航栏 - 仅保留首页和我的 -->
        <div class="bottom-nav">
            <div class="nav-item" onclick="goToPage('productListPage')">
                <div class="nav-icon">🏠</div>
                <div class="nav-text">首页</div>
            </div>
            <div class="nav-item active" onclick="goToPage('profilePage')">
                <div class="nav-icon">👤</div>
                <div class="nav-text">我的</div>
            </div>
        </div>
    </div>

    <!-- 成功提示弹窗 -->
    <div class="success-modal" id="successModal">操作成功</div>

    <script>
        // 页面跳转函数
        function goToPage(pageId) {
            document.querySelectorAll('.page').forEach(page => {
                page.classList.remove('active');
            });
            document.getElementById(pageId).classList.add('active');
            
            // 更新导航栏激活状态
            updateNavActive(pageId);
        }
        
        // 更新导航栏激活状态
        function updateNavActive(pageId) {
            // 移除所有导航项的激活状态
            document.querySelectorAll('.nav-item').forEach(item => {
                item.classList.remove('active');
            });
            
            // 根据页面ID设置对应导航项激活
            switch(pageId) {
                case 'productListPage':
                    document.querySelectorAll('.nav-item')[0].classList.add('active');
                    break;
                case 'profilePage':
                case 'userOrderListPage':
                    document.querySelectorAll('.nav-item')[1].classList.add('active');
                    break;
            }
        }

        // 注册页面跳转登录
        document.getElementById('toLogin').addEventListener('click', () => {
            goToPage('loginPage');
        });

        // 登录页面跳转注册
        document.getElementById('toRegister').addEventListener('click', () => {
            goToPage('registerPage');
        });

        // 注册功能
        document.getElementById('registerBtn').addEventListener('click', () => {
            const username = document.getElementById('registerUsername').value;
            const password = document.getElementById('registerPassword').value;
            const usernameError = document.getElementById('usernameError');
            const passwordError = document.getElementById('passwordError');
            let isValid = true;

            // 非空校验
            if (!username) {
                usernameError.style.display = 'block';
                isValid = false;
            } else {
                usernameError.style.display = 'none';
            }

            if (!password) {
                passwordError.style.display = 'block';
                isValid = false;
            } else {
                passwordError.style.display = 'none';
            }

            if (isValid) {
                // 模拟账号重复校验
                if (username === 'test') {
                    usernameError.textContent = '账号已存在';
                    usernameError.style.display = 'block';
                    return;
                }
                
                // 注册成功，跳转到登录页
                showSuccess('注册成功');
                setTimeout(() => {
                    goToPage('loginPage');
                }, 1000);
            }
        });

        // 登录功能
        document.getElementById('loginBtn').addEventListener('click', () => {
            const username = document.getElementById('loginUsername').value;
            const password = document.getElementById('loginPassword').value;
            const userError = document.getElementById('loginUserError');
            const pwdError = document.getElementById('loginPwdError');
            let isValid = true;

            // 非空校验
            if (!username) {
                userError.style.display = 'block';
                isValid = false;
            } else {
                userError.style.display = 'none';
            }

            if (!password) {
                pwdError.style.display = 'block';
                isValid = false;
            } else {
                pwdError.style.display = 'none';
            }

            if (isValid) {
                // 模拟登录成功，跳转到商品列表页
                showSuccess('登录成功');
                setTimeout(() => {
                    goToPage('productListPage');
                }, 1000);
            }
        });

        // 搜索功能
        document.getElementById('searchBtn').addEventListener('click', () => {
            const searchText = document.getElementById('productSearch').value;
            if (searchText.trim()) {
                showSuccess(`搜索: ${searchText}`);
            } else {
                showSuccess('请输入搜索内容');
            }
        });

        // 商品数量控制
        document.getElementById('minusBtn').addEventListener('click', () => {
            const input = document.getElementById('quantityInput');
            if (input.value > 1) {
                input.value = parseInt(input.value) - 1;
            }
        });

        document.getElementById('plusBtn').addEventListener('click', () => {
            const input = document.getElementById('quantityInput');
            input.value = parseInt(input.value) + 1;
        });

        // 更新购物车商品数量
        function updateQuantity(btn, change) {
            const input = btn.nextElementSibling || btn.previousElementSibling;
            let value = parseInt(input.value);
            value += change;
            
            if (value < 1) {
                // 数量为0时删除商品
                const cartItem = btn.closest('.cart-item');
                cartItem.remove();
                
                // 检查购物车是否为空
                if (document.querySelectorAll('.cart-item').length === 0) {
                    document.querySelector('.cart-items').innerHTML = `
                        <div class="cart-empty">
                            <div>🛒</div>
                            <div>购物车是空的</div>
                        </div>
                    `;
                    document.querySelector('.cart-total').style.display = 'none';
                    document.getElementById('checkoutBtn').style.display = 'none';
                }
                return;
            }
            
            input.value = value;
        }

        // 检查数量是否合法
        function checkQuantity(input) {
            if (input.value < 1 || isNaN(input.value)) {
                input.value = 1;
            }
        }

        // 加入购物车
        document.getElementById('addToCartBtn').addEventListener('click', () => {
            showSuccess('已加入购物车');
        });

        // 立即购买
        document.getElementById('buyNowBtn').addEventListener('click', () => {
            goToPage('orderConfirmPage');
        });

        // 结算
        document.getElementById('checkoutBtn').addEventListener('click', () => {
            goToPage('orderConfirmPage');
        });

        // 提交订单
        document.getElementById('submitOrderBtn').addEventListener('click', () => {
            showSuccess('订单提交成功');
            setTimeout(() => {
                goToPage('userOrderListPage');
            }, 1000);
        });

        // 退出登录
        document.getElementById('logoutBtn').addEventListener('click', () => {
            if (confirm('确定要退出登录吗？')) {
                goToPage('loginPage');
            }
        });

        // 显示成功提示
        function showSuccess(message) {
            const modal = document.getElementById('successModal');
            modal.textContent = message;
            modal.classList.add('active');
            setTimeout(() => {
                modal.classList.remove('active');
            }, 1000);
        }

        // 类别筛选点击事件
        document.querySelectorAll('.category-btn').forEach(btn => {
            btn.addEventListener('click', () => {
                document.querySelectorAll('.category-btn').forEach(b => {
                    b.classList.remove('active');
                });
                btn.classList.add('active');
            });
        });

        // 订单标签点击事件
        document.querySelectorAll('.order-tab').forEach(tab => {
            tab.addEventListener('click', () => {
                document.querySelectorAll('.order-tab').forEach(t => {
                    t.classList.remove('active');
                });
                tab.classList.add('active');
            });
        });

        // 支付方式选择
        document.querySelectorAll('.payment-method').forEach(method => {
            method.addEventListener('click', () => {
                document.querySelectorAll('.payment-method').forEach(m => {
                    m.classList.remove('selected');
                });
                method.classList.add('selected');
                method.querySelector('input').checked = true;
            });
        });
    </script>
</body>
</html>
